<template>
    <div
        style="width: 100%;height: 100%; background-color: #f2f2f2; display: flex;flex-direction: column;justify-content: start;align-items: center;">
        <div
            style="width: 95%; display: flex; flex-direction: column; justify-content: start; align-items: center;margin-top: 2rem; background-color: white;">
            <div class="admin-header">

                <el-button type="primary" @click="addRole">新增角色</el-button>
            </div>

            <el-table :data="tableData" style="width: 95%;margin-top: 2rem;">
                <el-table-column prop="name" label="角色名字" align="center" />
                <el-table-column fixed="right" label="操作" align="center">
                    <template #default="{ row }">
                        <el-button link type="primary" size="small" @click="handleClick(row)">编辑</el-button>
                        <el-button link type="primary" size="small" @click="del(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <!-- <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[4, 6, 8]"
                :small="small" :disabled="disabled" background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="20" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                style="margin-top: 5%;margin-bottom: 1rem;" /> -->
        </div>
    </div>




    <!-- 删除框 -->
    <el-dialog title="确定要删除吗？" v-model="delDialog" width="30%">
        <template #footer>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delDialog = false">取 消</el-button>
                <el-button type="primary" @click="suredel">确定</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 添加弹出框 -->
    <el-dialog title="添加角色" v-model="addDialog" width="30%">
        <el-form :model="addData">
            <el-form-item label="姓名:" :label-width="formLabelWidth">
                <el-input v-model="addData.name" type="text" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addDialog = false">取 消</el-button>
                <el-button type="primary" @click="sureAdd">新增</el-button>
            </span>

        </template>
    </el-dialog>
</template>

<script setup lang=tsx>
import { role, delRole, addRoleName } from '../api/Admin/AdminApi'
import router from '@/router';
import { ref, reactive } from 'vue'
let currentPage4 = ref(1)
let pageSize4 = ref(6)
let small = ref(false)
let disabled = ref(false)
let delId = ref<any>()
let editId = ref<any>()
let delDialog = ref(false)
let formLabelWidth = '100px'
let addDialog = ref(false)
let addData: { name: string } = reactive({
    name: '',
})
// 渲染接口
let addGuanLi = async () => {
    let { data }: { [propsName: string]: any } = await role()
    if (data.code == 0) {
        tableData.length = 0
        tableData.push(...data.data)
    }
}
onMounted(() => {
    addGuanLi()
})

let tableData = reactive<any>([])
let addRole = () => {
    addDialog.value = true
}


const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}

const handleClick = (row: any) => {
    router.push({ path: '/home/juesetianjia', query: { id: row.id } })

}
let del = (v: any) => {
    delId.value = v.id
    console.log(v)
    delDialog.value = true
}

let suredel = async () => {
    let { data }: { [propsName: string]: any } = await delRole({
        id: delId.value
    })
    if (data.code == 0) {
        ElMessage({
            message: data.msg,
            type: 'success'
        })
        delDialog.value = false
        addGuanLi()
    } else if (data.code == 20000) {
        ElMessage.error('角色删除失败')
        delDialog.value = false
    }
    delDialog.value = false
}

let sureAdd = async () => {
    let { data }: { [propsName: string]: any } = await addRoleName({
        name: addData.name
    })
    if (data.code == 0) {
        ElMessage({
            message: data.msg,
            type: 'success'
        })
        addDialog.value = false
        addGuanLi()
    }
}
</script>

<style scoped lang="less">
.firstItem {
    margin-right: 0px;
    border: none;
}

.admin-header {
    width: 95%;
    margin-top: 1rem;
    display: flex;
    flex-direction: row-reverse;
}
</style>